<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="alert(555)">123</div>

    <script>

        // 事件监听 addEventListener(事件类型 , 事件处理函数) 
        //   add 添加    event  事件  
        //   事件不会发生覆盖 


        // 事件监听
        //   一般浏览器  addEventListener('事件类型' ,fn)
        //   IE低版本浏览器   attachEvent('on事件类型' , fn)



        // DOM事件级别
        //   普通   DOM 0级事件
        //   事件监听  DOM 2级事件




        var oDiv = document.querySelector('div') ;

        // oDiv.addEventListener('click' , function() {
        //     alert(666) ;
        // })

        // oDiv.addEventListener('click' , function() {
        //     alert(777) ;
        // })


        // oDiv.attachEvent('onclick' , function() {
        //     alert(6) ;
        // })


        // addEvent(oDiv , 'click' , function() {
        //     alert(999) ;
        // })


        addEvent(oDiv , 'click' , fn)


        function fn() {
            alert(888)
        }


        oDiv.onclick = function(){}

        oDiv.onclick = fn ;









        // 添加事件监听的兼容写法
        function addEvent(ele , type , cb ) {
            if(window.addEventListener) {
                ele.addEventListener(type , cb )
            } else {
                ele.attachEvent('on' + type , cb)
            }
        }

    </script>
    
</body>
</html>